<template>
	<div>
		<div class="">
			<div class="bgff">
				<div class="clear plr20 ptb10">
					<span class="fl fz16">添加资源 &gt; <em class="fz14">视频/直播</em></span>
					<a class="fr layui-btn layui-btn-sm layui-btn-normal khb-btn" href="javascript:;" @click="goBack">返回</a>
				</div>
				<div class="khb-tips fz14 mlr20">
					<div>提示1：资源提交后会在一个工作日审核,审核通过后通过可接单。</div>
					<div>提示2：如有如有疑问，请联系您的媒介、客户经理。</div>
				</div>
				<el-container class="container">
					
					

					<!--ruleForm -->
					<el-form :model="dto" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
						
						<el-form-item label="账户ID" prop="accountId">
							<div class="inputw50">
								<el-input class="" v-model="dto.accountId "></el-input>
							</div>
						</el-form-item>
						
						<div class="imageView">
							<el-form-item label="用户头像" prop="userHead">
								<el-upload class="avatar-uploader" :action="this.$glo.uploadUrl" :accept="'image/*'" name="files"
								 :show-file-list="false" :on-success="userHeadSuccess" :on-error="handleAvatarError" :on-progress="handleProgress"
								 :before-upload="beforeAvatarUpload">
									<img v-if="dto.userHead" :src="dto.userHead" class="avatar">
									<i v-else class="el-icon-plus avatar-uploader-icon"></i>
								</el-upload>
							</el-form-item>
							
							<el-form-item label="账户截图" prop="accountScreenshot">
								<el-upload class="avatar-uploader" :action="this.$glo.uploadUrl" :accept="'image/*'" name="files"
								 :show-file-list="false" :on-success="qrCodeSuccess" :on-error="handleAvatarError" :on-progress="handleProgress"
								 :before-upload="beforeAvatarUpload">
									<img v-if="dto.accountScreenshot" :src="dto.accountScreenshot" class="avatar">
									<i v-else class="el-icon-plus avatar-uploader-icon"></i>
								</el-upload>
							</el-form-item>
							
							
						</div>
						
						<el-form-item label="用户昵称" prop="userNick">
							<div class="inputw50">
								<el-input class="" v-model="dto.userNick"></el-input>
							</div>
						</el-form-item>
						
						<el-form-item label="资源摘要" prop="summary">
							<div class="inputw50">
								<el-input v-model="dto.summary"></el-input>
							</div>
						</el-form-item>


						<el-form-item label="视频平台" prop="videoPlatform">
							<el-radio-group v-model="dto.videoPlatform">
								<el-radio label="1">抖音</el-radio>
								<el-radio label="2">火山</el-radio>
								<el-radio label="3">西瓜</el-radio>
								<el-radio label="4">微视</el-radio>
								<el-radio label="5">快手</el-radio>
							</el-radio-group>
						</el-form-item>
						
						<el-form-item label="资源类别" prop="resourceType">
							<el-checkbox-group v-model="dto.resourceType">
								<el-checkbox v-for="(item,index) in resourceTypeList" :label="(index+1)" :key="item">{{item}}</el-checkbox>
							</el-checkbox-group>
						</el-form-item>
						
						<el-form-item label="是否原创" prop="isOrigin">
							<el-select v-model="dto.isOrigin" placeholder="请选择是否原创">
								<el-option label="是" value="1">是</el-option>
								<el-option label="否" value="0">否</el-option>
							</el-select>
						</el-form-item>
						
						<el-form-item label="产品标签" prop="productLabes">
							<el-checkbox-group v-model="dto.productLabes">
								<el-checkbox label="1">最新资源</el-checkbox>
								<el-checkbox label="2">急速处理</el-checkbox>
								<el-checkbox label="3">热门资源</el-checkbox>
							</el-checkbox-group>
						</el-form-item>
						
						<el-form-item label="认证类型" prop="authType">
							<el-radio-group v-model="dto.authType">
								<el-radio label="1">个人认证</el-radio>
								<el-radio label="2">企业认证</el-radio>
								<el-radio label="3">一手认证</el-radio>
								<el-radio label="3">独家认证</el-radio>
							</el-radio-group>
						</el-form-item>
						
						<el-form-item label="预约时间" prop="reservationStartTime">
							<el-select v-model="dto.reservationStartTime" placeholder="请选择预约时间">
								<el-option label="周一" value="1">周一</el-option>
								<el-option label="周二" value="2">周二</el-option>
								<el-option label="周三" value="3">周三</el-option>
								<el-option label="周四" value="4">周四</el-option>
								<el-option label="周五" value="5">周五</el-option>
								<el-option label="周六" value="6">周六</el-option>
								<el-option label="周日" value="7">周日</el-option>
							</el-select>
							至 
							<el-select v-model="dto.reservationEndTime" prop="reservationEndTime" placeholder="请选择预约时间">
								<el-option label="周一" value="1">周一</el-option>
								<el-option label="周二" value="2">周二</el-option>
								<el-option label="周三" value="3">周三</el-option>
								<el-option label="周四" value="4">周四</el-option>
								<el-option label="周五" value="5">周五</el-option>
								<el-option label="周六" value="6">周六</el-option>
								<el-option label="周日" value="7">周日</el-option>
							</el-select>
						</el-form-item>
						
						<el-form-item label="出稿时间" prop="publishTime">
							<el-input-number v-model="dto.publishTime"  :min="1" :max="10" label="描述文字"></el-input-number>
							<span style="margin-right: 20px;"></span>
							<el-select v-model="dto.publishTimeUnit" prop="publishTimeUnit" placeholder="请选择需要来源">
								<el-option label="小时" value="1">小时</el-option>
								<el-option label="天" value="2">天</el-option>
							</el-select>
						</el-form-item>
						
						<el-form-item label="粉丝数" prop="fanNum">
							<el-input-number v-model="dto.fanNum" :min="0" label="描述文字"></el-input-number> 万
						</el-form-item>
						 
						<el-form-item label="平均观看数" prop="averageWatchNum">
							<el-input-number v-model="dto.averageWatchNum" :min="0" label="描述文字"></el-input-number> 万
						</el-form-item>
						
						<el-form-item label="主页地址">
							<div class="inputw50">
								<el-input v-model="dto.mainPageAddress" placeholder="请输入主页"></el-input>
							</div>
						</el-form-item>
						
						<el-form-item label="开通城市">
							<div class="inputw50">
								<el-input v-model="dto.openCity" placeholder="请输入开通城市"></el-input>
							</div>
						</el-form-item>
						
						<el-form-item label="上下架" prop="upUnderShelf">
							<el-radio-group v-model="dto.upUnderShelf">
								<el-radio disabled label="0">下架</el-radio>
							</el-radio-group>
						</el-form-item>
						
						<el-form-item label="简介说明" prop="introductionDesc">
							<div class="inputw50">
								<el-input type="textarea" placeholder="请输入内容" v-model="dto.introductionDesc" maxlength="999" show-word-limit>
								</el-input>
							</div>
						</el-form-item>
						
						<el-form-item label="预约价格" prop="reservationPrice">
							<el-input-number v-model="dto.reservationPrice" :min="0" label="价格"></el-input-number> 元
						</el-form-item>
						
						<el-form-item>
							<el-button type="primary" @click="submitForm('ruleForm')">保存</el-button>
						</el-form-item>
					</el-form>


				</el-container>

			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				imageUrl: '',
				dto: {
					accountId :'',//账号id
					accountScreenshot: "",//账户截图
					authType: "", //认证类型,1:个人认证;2:企业认证;3:一手认证;4:独家认证 ,
					averageWatchNum : "",//平均观看数 ,
					fanNum :'',//粉丝数
					id: "", //资源id
					introductionDesc:"",//简介说明 ,
					isOrigin : "",//是否原创,1:原创;0:非原创 ,
					mainPageAddress:"",// 主页地址 ,
					openCity: "", //开通城市,存城市编码,多个以逗号分隔 ,
					openCityStr :"",//开通城市文本
					productLabes: [],//产品标签,1:最新资源;2:急速处理;3:热门资源，多个以逗号分隔 ,
					publishTime: "", // 出稿时间 ,
					publishTimeUnit: "", // 出稿时间单位,1:小时;2:天; ,
					reservationEndTime: "",//预约结束时间,1-7:周一到周日 ,
					reservationPrice :"",// 预约价格 ,
					reservationStartTime:"",// 预约开始时间,1-7:周一到周日 ,
					resourceType :[],//资源类别,
					summary: "", // 资源摘要 
					upUnderShelf :"0",// 上下架,0:待上架;1:已上架；3:已下架（写死传0） ,
					userHead:"",// 用户头像 ,
					userNick:"",// 用户昵称 ,
					videoPlatform :"",// 视频平台,1:抖音;2:火山;3:西瓜;4:微视;5:快手;
				},
				resourceTypeList:[
					'娱乐','音乐','美食','电影','休闲','时尚','美容','购物','家居生活','星座命理','情感心理',
					'新闻资讯','宠物','文艺','生活/百科','IT/互联网','摄影旅游','幽默搞笑','母婴育儿','财经',
					'汽车','广告/营销','游戏动漫','健康养生','体育/健身','微商','军事','两性','房地产'
				],
				//平台分类数组
				platformTypeList :[
					'百家号','今日头条','东方头条','搜狐网','新浪网','网易号','一点资讯','UC头条','腾讯号',
					'凤凰号','知乎号','豆瓣','简书','东方财富号','中金在线号','趣头条','天天快报','其他'
				],
				//频道分类数组
				channelTypesList: ['新闻', '财经', 'IT', '科技', '娱乐', '旅游', '教育', '房产', '家居', '汽车', '女性',
					'时尚', '美容', '母婴育儿', '健康', '艺术', '家电数码', '游戏动漫', '体育', '资讯', '生活', '食品', '文化环保',
					'公益', '法律', '门户', '报业', '区块链', '工业贸易'
				],
				//收录参考数组
				inclusionReferenceList: ['新闻源', '网页收录', '百度收录', '包网页收录', '包新闻源收录', '不包收录'],
				//特殊行业数组
				specialIndustrysList: ['P2P', '金融', '微商', '健康', '加盟', '留学', '无'],
				//综合门户数组
				integratedPortalList: [
					'新浪网', '网易', '搜狐网', '腾讯网', '凤凰网', '中华网', '中国网', '环球网', '人民网', '新华网',
					'中国新闻网(中新网)', '光明网', '中国日报网', '国际在线', '中国青年网', '北青网', '慧聪网', '大众网',
					'央广网(中国广播网)', '中国经济网', '千龙网', '中青在线'
				],
				rules: {
					userNick:[{
						required: true,
						message: '请输入用户昵称',
						trigger: 'blur'},
					],
					userHead:[{
							required: true,
							message: '请上传头像'
					}],
					accountScreenshot:[{
							required: true,
							message: '请上传截图'
					}],
					accountId:[{
						required: true,
						message: '请输入账户id',
						trigger: 'blur',
					}],
					summary: [{
						max: 255,
						message: '长度在50个字符之内',
						trigger: 'blur'
					}],
					productLabes: [{
						type: 'array',
						required: true,
						message: '请至少选择一个产品标签',
						trigger: 'change'
					}],
					resourceType:[{
						type: 'array',
						required: true,
						message: '请至少选择一个资源类别',
						trigger: 'change'
					}],
					reservationStartTime: [{
						required: true,
						message: '接稿时间',
						trigger: 'change'
					}],
					reservationEndTime: [{
						required: true,
						message: '接稿时间',
						trigger: 'change'
					}],
					isOrigin:[{
						required: true,
						message: '请选择是否原创',
						trigger: 'change'
					}],
					publishTime: [{
						required: true,
						message: '请输入填写最快出稿时间',
						trigger: 'blur'
					}, ],
					publishTimeUnit: [{
						required: true,
						message: '请选择出稿时间单位',
						trigger: 'change'
					}],
					authType: [{
						required: true,
						message: '请选择认证类型',
						trigger: 'change'
					}],
					videoPlatform:[{
						required: true,
						message: '请选择视频平台',
						trigger: 'change'
					}],
					upUnderShelf: [{
						required: true
					}],
					introductionDesc: [{
						required: true,
						message: '请输入备注说明',
						trigger: 'blur'
					}],
					reservationPrice: [{
						required: true,
						message: '请输入价格',
						trigger: 'blur'
					}],
					fanNum :[{
							required: true,
							message: '请输入粉丝数',
							trigger: 'blur'
					}],
					averageWatchNum:[{
							required: true,
							message: '请输入平均观看数',
							trigger: 'blur'
					}],
				}
			}
		},
		created() {},
		methods: {
			goBack(){
				this.$router.go(-1);
			},
			//图片上传成功返回
			userHeadSuccess(res) {
				this.dto.userHead = res[0].url;
			},
			qrCodeSuccess(res,) {
				this.dto.accountScreenshot = res[0].url;
			},
			fanScreenshotSuccess(res,) {
				this.dto.fanScreenshot = res[0].url;
			},
			//图片上传失败返回
			handleAvatarError(err) {
				console.log(err)
				this.$message(err);
			},
			//上传时执行loading事件
			handleProgress() {
				this.loading = true; 
			},
			//上传之前判断
			beforeAvatarUpload(file) {
				// const isJPG = file.type === 'image/*';
				const isLt2M = file.size / 1024 / 1024 < 2;
				// if (!isJPG) {
				//   this.$message.error('上传头像图片只能是 JPG 格式!');
				// }
				if (!isLt2M) {
					this.$message.error('上传头像图片大小不能超过 2MB!');
				}
				//isJPG&&
				return isLt2M;
			},
			//提交
			submitForm(formName) {
				this.$refs[formName].validate((valid) => {
					if (valid) {
						this.editSoftText();
						
					} else {
						console.log('error submit!!');
						return false;
					}
				});
			},
			findSoftText(){
				
			},
			editSoftText(){
				console.log(this.dto)
				let dto = this.dto;
				let datas = {
					// access_token:this.$store.state.accToken,
					accountId :dto.accountId,//账号id
					accountScreenshot: dto.accountScreenshot,
					authType: dto.authType,
					averageWatchNum : dto.averageWatchNum,
					fanNum :dto.fanNum,
					id: dto.id?dto.id:'',
					introductionDesc :dto.introductionDesc,
					isOrigin : dto.isOrigin,
					mainPageAddress:dto.mainPageAddress,
					openCity: '050020',	
					openCityStr:'广州',
					productLabes: dto.productLabes.join(),
					publishTime: dto.publishTime,
					publishTimeUnit: dto.publishTimeUnit,
					reservationEndTime: dto.reservationEndTime,
					reservationStartTime : dto.reservationStartTime,
					reservationPrice :dto.reservationPrice,
					resourceType :dto.resourceType.join(),
					summary: dto.summary, 
					upUnderShelf: "0", 
					userHead :dto.userHead,
					userNick:dto.userNick,	
					videoPlatform :dto.videoPlatform,
				}
				this.$api.req.saveVedio(datas)
				.then(res=>{
					console.log(res);
					this.$message(res.data)
				})
			},
			resetForm(formName) {
				this.$refs[formName].resetFields();
			}
		}
	}
</script>

<style>
	.container {
		padding-top: 20px;
	}

	.avatar-uploader .el-upload {
		border: 1px dashed #d9d9d9;
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		overflow: hidden;
	}

	.avatar-uploader .el-upload:hover {
		border-color: #409EFF;
	}

	.avatar-uploader-icon {
		font-size: 28px;
		color: #8c939d;
		width: 178px;
		height: 178px;
		line-height: 178px;
		text-align: center;
	}

	.avatar {
		width: 178px;
		height: 178px;
		display: block;
	}

	.inputw50 {
		width: 50%;
	}
	.imageView{
		display: flex;
		align-items: center;
		justify-content: flex-start;
	}
</style>
